<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>添加赛事</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="stylesheet" href="css/ydui.css?rev=@@hash" />
    <link rel="stylesheet" href="css/demo.css" />
    <script src="js/ydui.flexible.js"></script>
</head>

<body>
    <section class="g-flexview" id="app" v-cloak>
        <sync-loader v-if="loading" :color="color"></sync-loader>
        <section class="g-scrollview" v-if="!loading">

            <div class="m-cell demo-small-pitch">
                <div class="cell-item">
                    <div class="cell-left">赛事名称</div>
                    <div class="cell-right">
                        <input type="text" id="gameName" v-model="gameName" class="cell-input" value="" placeholder="请输入您的姓名" autocomplete="off" />
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">比赛模式</div>
                    <label class="cell-right cell-arrow">
                        <select class="cell-select" id="gameType"  v-model="modeId">
                            <option value=""  v-for="item in types" :value="item.value">{{item.label}}</option>
                        </select>
                    </label>
                </div>
                <div class="cell-item">
                    <div class="cell-left">报名开始时间</div>
                    <div class="cell-right">
                        <input class="cell-input" id="starApplyTime" v-model="starApplyTime" type="datetime-local" value="" placeholder="请输入报名开始时间" />
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">报名结束时间</div>
                    <div class="cell-right">
                        <input class="cell-input" id="overApplyTime" v-model="overApplyTime" type="datetime-local" value="" placeholder="请输入报名结束时间" />
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">比赛开始时间</div>
                    <div class="cell-right">
                        <input class="cell-input" id="startMatchTime" v-model="startMatchTime" type="datetime-local" value="" placeholder="请输入比赛开始时间" />
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">比赛结束时间</div>
                    <div class="cell-right">
                        <input class="cell-input" id="overMatchTime" v-model="overMatchTime" type="datetime-local" value="" placeholder="请输入报名结束时间" />
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">赛事条件</div>
                    <div class="cell-right">
                        <input type="text" class="cell-input" v-model="applyFee" id="applyFee" value="" placeholder="请输入鸡蛋数量" autocomplete="off" />
                    </div>
                </div>

                <div class="cell-item">
                    <div class="cell-left">奖励设置</div>
                    <div class="cell-right cell-arrow" @click="settingShow">设置查看</div>
                </div>

                <div class="cell-item">
                    <div class="cell-left">比赛战队</div>
                    <div class="cell-right cell-arrow" @click="competitionTeam">比赛战队</div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">比赛类型</div>
                    <label class="cell-right cell-arrow">
                        <select class="cell-select" v-model="matchTypeId">
                            <option value="0" v-for="item in gametype" :value="item.value">{{item.label}}</option>
                        </select>
                    </label>
                </div>
                <div class="cell-item">
                    <div class="cell-left">房间名称</div>
                    <div class="cell-right">
                        <input type="text" class="cell-input" v-model="roomName" placeholder="请输入房间名称" autocomplete="off" />
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">房间密码</div>
                    <div class="cell-right">
                        <input type="text" class="cell-input" v-model="roomPassWord" placeholder="请输入房间密码" autocomplete="off" />
                    </div>
                </div>
            </div>
            <div class="m-button">
                <button type="button" id="saveBtn" @click="saveBtn" class="btn-block btn-primary">保存</button>
            </div>
        </section>

    </section>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/vue-resource.js"></script>
    <script src="js/vue-spinner-master/dist/vue-spinner.js"></script>
    <script src="js/layer/layer.js"></script>
</body>
<script>
    /* 获取头部信息 */
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return r[2];
        }
    };

    var awardNum; //奖励设置的值
    var checkedNames; //比赛战队
    var checkedId; //比赛战队Id
    function backBlock(value) {
        awardNum = value.awardNum;
        console.log(value.awardNum);
    }

    function backteam(value) {
        checkedId = value.checkedId;
        console.log(value.checkedId);
        checkedNames = value.checkedNames;
        console.log(value.checkedNames);
    }
    var SyncLoader = VueSpinner.SyncLoader
    var app = new Vue({
        el: '#app',
        components: {
            'SyncLoader': SyncLoader
        },
        data: {
            token: GetQueryString('token'),
            appType: GetQueryString('appType'),
            loading: true,
            color: '#FF6C00',
            gameName: [],
            modeId: -1,
            types: [{
                'value': -1,
                'label': '请选择'
            }], //比賽模式
            starApplyTime: '',
            overApplyTime: '',
            startMatchTime: '',
            overMatchTime: '',
            applyFee: '',
            matchTypeId: -1,
            gametype: [{
                'value': -1,
                'label': '请选择'
            }], //比赛类型
            roomName: '',
            roomPassWord: '',
        },
        methods: {
            get: function() {
                this.$http({
                    method: "post",
                    url: "/baseType/select?wm[TYPE_FLAG]=40",
                    data: {
                        token: this.token
                    },
                    emulateJSON: true
                }).then(function(res) { // 访问成功后执行
                    this.loading = false;
                    console.log(res);
                    for (var i in res.data) {
                        this.types.push(res.data[i]);
                    }
                }, function(error) { // 访问失败执行
                    console.log(error);
                    layer.msg('获取比赛模式失败');
                    this.loading = false;
                })
            },
            gettype: function() {
                this.$http({
                    method: "post",
                    url: "/baseType/select?wm[TYPE_FLAG]=50",
                    data: {
                        token: this.token
                    },
                    emulateJSON: true
                }).then(function(res) { // 访问成功后执行
                    this.loading = false;
                    console.log(res);
                    for (var i in res.data) {
                        this.gametype.push(res.data[i]);
                    }
                }, function(error) { // 访问失败执行
                    console.log(error);
                    layer.msg('接口返回失败');
                    this.loading = false;
                })
            },
            saveBtn: function() {
                if (this.gameName == "") {
                    layer.msg('请输入赛事名称');
                    return;
                } else if (this.modeId == "") {
                    layer.msg('请选择赛事类型');
                    return;
                } else if (this.starApplyTime == "") {
                    layer.msg('请选择报名开始时间');
                    return;
                } else if (this.overApplyTime == "") {
                    layer.msg('请选择报名结束时间');
                    return;
                } else if (this.overApplyTime != "") {
                    if (this.overApplyTime < this.starApplyTime) {
                        layer.msg('报名结束时间必须大于开始时间');

                    } else if (this.startMatchTime == "") {
                        layer.msg('请选择比赛开始时间');
                        return;
                    } else if (this.overMatchTime == "") {
                        layer.msg('请选择比赛结束时间');
                        return;
                    } else if (this.overMatchTime != "") {
                        if (this.overMatchTime < this.startMatchTime) {
                            layer.msg('比赛结束时间必须大于开始时间');
                            return;
                        } else if (this.applyFee == "") {
                            layer.msg('请输入赛事条件');
                            return;
                        } else if (awardNum == undefined || awardNum == '') {
                            layer.msg('请选择奖励设置');
                            return;
                        } else if (checkedNames == undefined || checkedNames == '') {
                            layer.msg('请选择比赛战队');
                            return;
                        } else if (this.matchTypeId == "") {
                            layer.msg('请选择比赛类型');
                            return;
                        }

                    }
                }
                this.$http({
                    method: "post",
                    url: "/appMatch/addMatch",
                    data: {
                        token: this.token,
                        matchName: this.gameName,
                        modeId: this.modeId,
                        applyStartTime: this.starApplyTime,
                        applyEndTime: this.overApplyTime,
                        matchStartTime: this.startMatchTime,
                        matchEndTime: this.overMatchTime,
                        matchTypeId: this.matchTypeId,
                        applyFee: this.applyFee,
                        roomName: this.roomName,
                        roomPwd: this.roomPassWord,
                        awardConfig: awardNum, //奖励设置
                        matchTeamId: checkedId, //战队ID
                        matchTeamName: checkedNames, //战队名称
                    },
                    emulateJSON: true
                }).then(function(res) { // 访问成功后执行
                    this.loading = false;
                    console.log(res);
                    layer.msg(res.data.message)
                    if (res.data.code == '0') {
                        if (this.appType == 'ios') {
                            window.webkit.messageHandlers.returnBack.postMessage('');
                        }
                    }
                }, function(error) { // 访问失败执行
                    console.log(error);
                    layer.msg('接口返回失败');
                    this.loading = false;
                })
                layer.msg('保存成功');
            },
            settingShow: function() {
                var index = layer.open({
                    type: 2,
                    title: '奖励设置',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['100%', '100%'],
                    content: 'rewardSet.html?token=' + awardNum //iframe的url
                });
                layer.full(index);
            },
            competitionTeam: function() {
                var index = layer.open({
                    type: 2,
                    title: '比赛战队',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['100%', '100%'],
                    content: 'competitionTeams.html?token=' + this.token + '&checkedId=' + checkedId //iframe的url
                });
                layer.full(index);
            }
        },
        mounted: function() {
            this.$nextTick(function() {
                var that = this;
                that.get();
                that.gettype();
            })
        }
    })
</script>

</html>